<template>
  <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
    <a-form-model :model="webInfo">
      <a-form-item
        label="公司名称"
        :labelCol="{span: 7}"
        :wrapperCol="{span: 10}"
      >
        <a-input v-model="webInfo.company"/>
      </a-form-item>
      <a-form-item
        label="公众号二维码"
        :labelCol="{span: 7}"
        :wrapperCol="{span: 5}"
      >
        <a-upload
          name="image"
          list-type="picture-card"
          class="avatar-uploader"
          :show-upload-list="false"
          :before-upload="beforeUpload"
          :headers="headers"
          action="/api/image/upload"
          @change="handleChange"
        >
          <img v-if="webInfo.shop_qrcode" :src="$staticUrl + webInfo.shop_qrcode" alt="avatar" class="shop_image"/>
          <div v-else>
            <a-icon :type="imgLoading ? 'loading' : 'plus'" />
            <div class="ant-upload-text">
              上传图片
            </div>
          </div>
        </a-upload>
      </a-form-item>
      <a-form-item
        label="公司地址"
        :labelCol="{span: 7}"
        :wrapperCol="{span: 10}"
      >
        <a-input v-model="webInfo.address"/>
      </a-form-item>
      <a-form-item
        label="网站备案地址"
        :labelCol="{span: 7}"
        :wrapperCol="{span: 10}"
      >
        <a-input v-model="webInfo.icp"/>
      </a-form-item>
      <a-form-item
        label="客服电话1"
        :labelCol="{span: 7}"
        :wrapperCol="{span: 6}"
      >
        <a-input v-model="webInfo.tel1"/>
      </a-form-item>
      <a-form-item
        label="客服电话2"
        :labelCol="{span: 7}"
        :wrapperCol="{span: 6}"
      >
        <a-input v-model="webInfo.tel2"/>
      </a-form-item>
      <a-form-item
        label="柴油统一国标价"
        :labelCol="{span: 7}"
        :wrapperCol="{span: 4}"
      >
        <a-input v-model="webInfo.price_0_nation" suffix="元"/>
      </a-form-item>
      <a-form-item
        label="柴油统一原价"
        :labelCol="{span: 7}"
        :wrapperCol="{span: 4}"
      >
        <a-input v-model="webInfo.price_0_original" suffix="元"/>
      </a-form-item>
      <a-form-item
        label="柴油统一优惠价"
        :labelCol="{span: 7}"
        :wrapperCol="{span: 4}"
      >
        <a-input v-model="webInfo.price_0_now" suffix="元"/>
      </a-form-item>
      <a-form-item
        label="柴油统一优惠金额"
        :labelCol="{span: 7}"
        :wrapperCol="{span: 4}"
      >
        <a-tag color="blue" >
          {{ webInfo.price_0_nation - webInfo.price_0_now | toFixed }} 元
        </a-tag>
      </a-form-item>
      <a-form-item
        label="点我加油注意事项"
        :labelCol="{span: 7}"
        :wrapperCol="{span: 10}"
      >
        <a-textarea rows="4" v-model="webInfo.onekeygas_tip"/>
      </a-form-item>
      <a-form-item
        label="油卡充值实体卡公共前缀"
        :labelCol="{span: 7}"
        :wrapperCol="{span: 6}"
      >
        <a-input v-model="webInfo.entity_common_num"/>
      </a-form-item>
      <a-form-item
        label="油卡充值虚拟卡公共前缀"
        :labelCol="{span: 7}"
        :wrapperCol="{span: 6}"
      >
        <a-input v-model="webInfo.virtual_common_num"/>
      </a-form-item>
      <a-form-item
        label="油卡充值注意事项"
        :labelCol="{span: 7}"
        :wrapperCol="{span: 10}"
      >
        <a-textarea rows="4" v-model="webInfo.recharge_tip"/>
      </a-form-item>
      <a-form-item
        label="092国标价"
        :labelCol="{span: 7}"
        :wrapperCol="{span: 4}"
      >
        <a-input v-model="webInfo.price_92" suffix="元"/>
      </a-form-item>
      <a-form-item
        label="095国标价"
        :labelCol="{span: 7}"
        :wrapperCol="{span: 4}"
      >
        <a-input v-model="webInfo.price_95" suffix="元"/>
      </a-form-item>
      <a-form-item
        label="098国标价"
        :labelCol="{span: 7}"
        :wrapperCol="{span: 4}"
      >
        <a-input v-model="webInfo.price_98" suffix="元"/>
      </a-form-item>
      <a-form-item style="margin-top: 24px" :wrapperCol="{span: 10, offset: 7}">
        <a-button type="primary" @click="save">保存</a-button>
      </a-form-item>
    </a-form-model>
  </a-card>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
import * as Api from '@/services/index'

export default {
  name: 'Setting',
  data () {
    return {
      checkedList: [],
      value: 1,
      business_state: true,
      imageUrl: '',
      imgLoading: '',
    }
  },
  computed: {
    ...mapGetters('account', ['token']),
    ...mapGetters('setting', ['webInfo']),
    headers() {
      return {
        'Authorization': 'Bearer ' + this.token,
        'X-Requested-With': 'XMLHttpRequest' 
      }
    }
  },
  created() {
    this.getWebInfo()
  },
  methods: {
    ...mapMutations('setting', ['setWebInfo']),
    getWebInfo() {
      Api.WebInfo().then(res => {
        if (res.data) {
          this.setWebInfo(res.data)
        }
      })
    },
    save() {
      Api.Setting(this.webInfo).then(res => {
        this.$message.success(res.message);
      })
    },
    handleChange(info) {
      if (info.file.status === 'uploading') {
        this.imgLoading = true;
        return;
      }
      if (info.file.status === 'done') {
        // 如果已经有图片则先删除图片
        if (this.webInfo.shop_qrcode) {
          this.handleRemove()
        }
        this.webInfo.shop_qrcode = info.file.response.data.url
        // 如果是编辑的，图片上传成功立刻保存
        this.saveImage()
      }
    },
    // 删除图片
    handleRemove() {
      Api.DeleteImg({image: this.webInfo.shop_qrcode})
    },
    // 保存图片
    saveImage() {
      Api.Setting({shop_qrcode: this.webInfo.shop_qrcode}).then(() => {
        this.$message.success('图片上传成功!');
      })
    },
    beforeUpload(file) {
      console.log(file);
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
      if (!isJpgOrPng) {
        this.$message.error('You can only upload JPG file!');
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('Image must smaller than 2MB!');
      }
      return isJpgOrPng && isLt2M;
    },
  },
}
</script>

<style scoped lang="less">
.shop_image{
  max-width: 100px;
  max-height: 100px;
}
</style>
